<template>
  <el-breadcrumb separator="/" id="breadcrumb">
    <el-breadcrumb-item :to="{ path: '/home/log' }">系统监控</el-breadcrumb-item>
    <el-breadcrumb-item>服务器状态</el-breadcrumb-item>
  </el-breadcrumb>
  <el-row :gutter="20">
    <el-col :span="8" >
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>CPU</span>
          </div>
        </template>
        <div>
          <div class="wos-flex wos-flex-row wos-flex-between line">
            <div>属性</div>
            <div>值</div>
          </div>
          <div class="wos-flex wos-flex-row wos-flex-between line">
            <div>核心数</div>
            <div>{{ info.cpu.cpuNum }}个</div>
          </div>
          <div class="wos-flex wos-flex-row wos-flex-between line">
            <div>用户使用率</div>
            <div>{{ info.cpu.used }}%</div>
          </div>
          <div class="wos-flex wos-flex-row wos-flex-between line">
            <div>系统使用率</div>
            <div>{{ info.cpu.sys }}%</div>
          </div>
          <div class="wos-flex wos-flex-row wos-flex-between line">
            <div>当前空闲率</div>
            <div>{{ info.cpu.free }}%</div>
          </div>
        </div>
        <template #footer>当前时间：{{nowTime}}</template>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>内存</span>
          </div>
        </template>
        <div>
          <div class="wos-flex wos-flex-row wos-flex-between line">
            <div>属性</div>
            <div>内存</div>
            <div>值</div>
          </div>
          <div class="wos-flex wos-flex-row wos-flex-between line">
            <div>总内存</div>
            <div>{{ info.mem.total }}G</div>
            <div>{{ info.jvm.total }}G</div>
          </div>
          <div class="wos-flex wos-flex-row wos-flex-between line">
            <div>已用内存</div>
            <div>{{ info.mem.used }}G</div>
            <div>{{ info.jvm.used }}G</div>
          </div>
          <div class="wos-flex wos-flex-row wos-flex-between line">
            <div>剩余内存</div>
            <div>{{ info.mem.free }}G</div>
            <div>{{ info.jvm.free }}G</div>
          </div>
          <div class="wos-flex wos-flex-row wos-flex-between line">
            <div>使用率</div>
            <div>{{ info.mem.usage }}G</div>
            <div>{{ info.jvm.usage }}G</div>
          </div>
        </div>
        <template #footer>运行时间：{{info.jvm.runTime}}</template>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>服务器信息</span>
          </div>
        </template>
        <div>
          <div class="wos-flex wos-flex-row wos-flex-between line">
            <div>名称</div>
            <div>内容</div>
          </div>
          <div class="wos-flex wos-flex-row wos-flex-between line">
            <div>服务器名称</div>
            <div>{{ info.sys.computerName }}</div>
          </div>
          <div class="wos-flex wos-flex-row wos-flex-between line">
            <div>操作系统</div>
            <div>{{ info.sys.osName }}</div>
          </div>
          <div class="wos-flex wos-flex-row wos-flex-between line">
            <div>服务器IP</div>
            <div>{{ info.sys.computerIp }}</div>
          </div>
          <div class="wos-flex wos-flex-row wos-flex-between line">
            <div>系统架构</div>
            <div>{{ info.sys.osArch }}</div>
          </div>
        </div>

        <template #footer>项目路径：{{info.sys.userDir}}</template>
      </el-card>
    </el-col>
  </el-row>
  <div style="height: 20px;width: 100%"></div>
  <el-row :gutter="20">
    <el-col :span="24">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
              <span>JAVA虚拟机信息</span>
          </div>
        </template>
        <div>
          <div class="wos-flex wos-flex-row wos-flex-between">
            <div class="line wos-width-48 wos-flex wos-flex-row wos-flex-between">
              <div>JAVA名称</div>
              <div>{{ info.jvm.name }}</div>
            </div>
            <div class="line wos-width-48 wos-flex wos-flex-row wos-flex-between">
              <div>JAVA版本</div>
              <div>{{ info.jvm.version }}</div>
            </div>
          </div>
          <div class="wos-flex wos-flex-row wos-flex-between">
            <div class="line wos-width-48 wos-flex wos-flex-row wos-flex-between">
              <div>启动时间</div>
              <div>{{ info.jvm.startTime }}</div>
            </div>
            <div class="line wos-width-48 wos-flex wos-flex-row wos-flex-between">
              <div>运行时间</div>
              <div>{{ info.jvm.runTime }}</div>
            </div>
          </div>
          <div class="wos-flex wos-flex-row wos-flex-between">
            <div class="line wos-width-48 wos-flex wos-flex-row wos-flex-between">
              <div>安装路径</div>
              <div>{{ info.jvm.home }}</div>
            </div>
            <div class="line wos-width-48 wos-flex wos-flex-row wos-flex-between">
              <div>项目路径</div>
              <div>{{ info.sys.userDir }}</div>
            </div>
          </div>
          <div class="wos-flex wos-flex-row wos-flex-between">
            <div class="line wos-width-100 wos-flex wos-flex-row">
              <div>运行参数：</div>
              <div>{{ info.jvm.inputArgs }}</div>
            </div>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <div style="height: 20px;width: 100%"></div>
  <el-row :gutter="20">
    <el-col :span="24">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>磁盘状态</span>
          </div>
        </template>
        <div class="pl wos-flex wos-flex-row">
          <div>盘符路径</div>
          <div>文件系统</div>
          <div>盘符类型</div>
          <div>总大小</div>
          <div>可用大小</div>
          <div>已用大小</div>
          <div>已用百分比</div>
        </div>
        <div v-for="(item, index) in info.sysFiles" :key="index" class="pl wos-flex wos-flex-row wos-flex-between">
          <div>{{item.dirName}}</div>
          <div>{{item.sysTypeName}}</div>
          <div>{{item.typeName}}</div>
          <div>{{item.total}}</div>
          <div>{{item.free}}</div>
          <div>{{item.used}}</div>
          <div>{{item.usage}}</div>
        </div>
      </el-card>
    </el-col>
  </el-row>

</template>

<script setup lang="ts">

import {ref, reactive, onBeforeMount} from 'vue'
import {serverInfo} from "@/api/system/monitor-server.ts";

let nowTime = reactive({})
let info = ref({
  "cpu": {
    "cpuNum": 0,
    "total": 0,
    "sys": 0.0,
    "used": 0.0,
    "wait": 0.0,
    "free": 100.0
  },
  "mem": {
    "total": 0,
    "used": 0,
    "free": 0,
    "usage": 0
  },
  "jvm": {
    "total": 0,
    "max": 0,
    "free": 0,
    "version": "",
    "home": "",
    "startTime": "",
    "usage": 0,
    "inputArgs": "[]",
    "used": 0,
    "runTime": "",
    "name": ""
  },
  "sys": {
    "computerName": "",
    "computerIp": "",
    "userDir": "",
    "osName": "",
    "osArch": ""
  },
  "sysFiles": [
    {
      "dirName": "",
      "sysTypeName": "",
      "typeName": "",
      "total": "",
      "free": "",
      "used": "",
      "usage": 0
    }
  ]
})
// info = serverInfo()
onBeforeMount(async () => {
  info.value = await serverInfo()
  nowTime = new Date().toLocaleString()
})
//数据初始化


</script>
<style scoped lang="scss">
.content {
  padding-top: 20px;
}

.line {
  border-bottom: 1px solid #d5d5d5;
  padding: 10px 10px;
  cursor: pointer;
}
.pl div{
  padding: 10px 10px;
  border-bottom: 1px solid #d5d5d5;
  cursor: pointer;
  width: 14.2%;
}
.line:hover {
  background-color: #d5d5d5;
  border-radius: 5px;
}
</style>